<template>
    <div class="dialog-wrapper">
      <el-dialog
        :visible.sync="fitVisible"
        title="选择物料"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-card shadow="never" class="aui-card--fill managementWrapper">
          <div class="mod-sys__user">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
            >
              <el-form-item>
                <el-input
                  v-model="dataForm.material_serial"
                  placeholder="物料编号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  v-model="dataForm.name"
                  placeholder="物料名称"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item>
                <ren-dept-tree v-model="dataForm.deptId" :placeholder="$t('dept.title')" :query="true"></ren-dept-tree>
              </el-form-item> -->
              <el-form-item>
                <el-button @click="getDataList()">搜索</el-button>
              </el-form-item>
            </el-form>
            <!-- 单选 -->
            <!-- @selection-change="dataListSelectionChangeHandle"
            @row-click="singleElection" -->
            <el-table
              v-loading="dataListLoading"
              :data="dataList"
              border
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <!-- <el-table-column label="" align="center" width="30">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.$index"
                  v-model="templateSelection"
                  @change.native="getCurrentRow(scope.row)"
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-radio
                >
              </template>
            </el-table-column> -->
              <el-table-column type="selection" width="40"> </el-table-column>
              <el-table-column
                type="index"
                label="序号"
                header-align="center"
                align="center"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="material_serial"
                label="物料编号"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column prop="name" label="物料" width="270">
                <template slot-scope="scope">
                  <div class="verticalCenter prodBox">
                    <div class="imgBox">
                      <img
                        :src="scope.row.pics.length > 0 ? scope.row.pics[0] : ''"
                      />
                    </div>
                    <div class="rightBox">
                      {{ scope.row.name }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="specifications_model"
                label="规格型号"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="material_type"
                label="物料类别"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  {{ $getDictLabel("material_type", String(scope.row.material_type)) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="material_attr"
                label="物料属性"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  {{ $getDictLabel("material_attr", String(scope.row.material_attr)) }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="num"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChangeHandle"
              @current-change="pageCurrentChangeHandle"
            >
            </el-pagination>
  
            <!-- <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" class="avatar" />
        </el-dialog> -->
          </div>
        </el-card>
        <template slot="footer">
          <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
          <el-button type="primary" @click="handleCheck">{{
            $t("confirm")
          }}</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import mixinViewModule from "@/mixins/view-module";
  export default {
    mixins: [mixinViewModule],
    data() {
      return {
        mixinViewModuleOptions: {
          getDataListURL: "/material",
          getDataListIsPage: true,
        },
        dataForm: {
          name: "",
          material_serial: "",
        },
        fitVisible: true,
        chooseInfo: [],
      };
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.chooseInfo = val;
      },
      handleCheck() {
        if (!this.chooseInfo) {
          this.$message.warning("请选择物料");
          return;
        }
        this.$emit("handleConfirm", this.chooseInfo);
        this.$emit("handleClose");
      },
      singleElection(row) {
        this.chooseInfo = row;
      },
      handleCancel() {
        this.$emit("handleClose");
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .dialog-wrapper {
    ::v-deep .el-dialog {
      width: 70% !important;
    }
    .managementWrapper {
      .prodBox {
        padding-left: 6px;
        .imgBox {
          width: 64px;
          height: 64px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .rightBox {
          margin-left: 14px;
          text-align: left;
          .top {
            max-width: 200px;
            margin-bottom: 6px;
          }
          .bottom {
            color: $mainColor;
          }
        }
      }
    }
  }
  </style>
  
  <style lang="scss">
  ::v-deep .el-dialog__footer {
    border-top: 1px solid #f4f4f4 !important;
    padding: 16px 20px 16px !important;
  }
  </style>
  